s
<template>
  <div class="">
    <search v-model="searchValue"></search>
    <div pb-80>
      <div text-center pt-83>
        <h1 text-40>文档<span class="text-#448BF5">分类</span></h1>
        <div class="text-#5F6368 text-18 mt-22 mb-50">
          帮助文档分类，方便您快速找到需要的帮助信息按类别浏览我们的帮助文档，快速找到您需要的信息
        </div>
      </div>
      <div flex flex-wrap gap-40 justify-center>
        <div v-for="(i, idx) in plugins" :key="idx" class="plugin-item relative px-36">
          <div
            class="bg-#E6F0FF border-rd-20 flex items-center justify-center w-70 h-70 mt-40 mb-29"
          >
            <img src="@/assets/image/alipay.png" alt="" h-40 w-40 object-contain />
          </div>
          <div >
            <h2 text-24>入门指南</h2>
            <div text-16 line-height-24 mt-10 mb-38>
              新用户快速上手指南，了解熵付通的基本功能和使用方法
            </div>
            <div pl-24 class="text-#5F6368">
              <div h-52 >一键安装，无需开发经验</div>
              <div h-52 >支持多种支付场景（PC/移动/H5）</div>
              <div h-52 >实时订单状态同步</div>
              <div h-52 >自动生成对账单</div>
            </div>
            <div class="bottom flex items-center">
              <el-button type="primary" link text-20>查看全部文档</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <question></question>
    <support></support>
  </div>
</template>

<script setup lang="ts">
import search from './search.vue'
import question from './question.vue'
import support from './support.vue'
import { ref } from 'vue'
const searchValue = ref('')

/**
 * 插件列表
 */
const plugins = ref([])
plugins.value = [
  { name: '插件1', desc: '插件1的描述', tag: 'b' },
  { name: '插件2', desc: '插件2的描述', tag: 'c' },
  { name: '插件3', desc: '插件3的描述', tag: 'b' }
]
</script>

<style scoped lang="scss">
.plugin-item {
  width: 360px;
  height: 585px;
  border-width: 0px 0px 0px 4px;
  border-style: solid;
  border-color: #448bf5;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 15px;
  .bottom {
    position: absolute;
    left: 36px;
    bottom: 40px;
  }
}
</style>
